<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 解决图片403 -->
    <meta name="referrer" content="no-referrer" />
    <title>服务器代理之糖堆</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        ul{
            width: 800px;
            display: flex;
            flex-wrap: wrap;
            margin: 50px auto;
            justify-content: space-between;
        }
        li{
            width: 150px;
            border: 1px solid red;
            margin-bottom: 10px;
        }
        img{
            width: 100%;
        }
    </style>
</head>
<body>
    <ul id="list">
        <!-- <li>
            <img src="https://c-ssl.duitang.com/uploads/item/202006/03/20200603172803_ZU42N.thumb.400_0.jpeg" alt="">
            <h4>迪士尼公主
                画师：一颗猫头_</h4>
        </li> -->
    </ul>

    <script>
        var box = document.querySelector('#list');

        var xhr = new XMLHttpRequest();
        // 在D:\phpstudy_pro\Extensions\Nginx1.15.11\conf\vhosts\localhost_80.conf里面配置代理
        var str = '/dt?include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&filter_id=%E4%BA%BA%E7%89%A9%E6%98%8E%E6%98%9F&start=24&_=1594386690684';
        xhr.open("GET",str);
        xhr.send();

        xhr.onreadystatechange = () =>{
            if(xhr.readyState === 4&& /^2\d{2}$/.test(xhr.status)){
                var data = JSON.parse(xhr.responseText).data.object_list;
                var html = '';
                for(var i=0;i<data.length;i++){
                    html += `
                        <li>
                            <img src="${data[i].photo.path}" alt="">
                            <h4>${data[i].msg}</h4>
                        </li>
                    `;
                }
                box.innerHTML = html;
                
            }
        }

    </script>
</body>
</html>